<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="../css/self-center.css">
    <link rel="stylesheet" href="../css/product.css">
    <style>

    </style>
</head>
<body>
    <script src="../plugins/layui/layui-v2.5.6/layui/layui.js"></script>
    <script>
      layui.use(['form', 'element'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        
        //监听导航点击
        element.on('nav(demo)', function(elem){
        //console.log(elem)
        layer.msg(elem.text());
        });
        });
    </script>
    <div id="outer">
        <div class="nav">
            <div>
            <i class="layui-icon layui-icon-home" style="font-size: 20px; color: gray;"></i> 
            <a href="../index.html">店铺首页</a>
            <i class="layui-icon layui-icon-location" style="font-size: 20px; color: gray;"></i>
            安徽
                <div class="nav2">
                    <span class="layui-breadcrumb" lay-separator="|" style="float: right;margin-right: 20px;">
                        <a href="../view/self-center.html">个人中心</a>
                        <a href="../view/order.html" style="padding-left:20px ;">我的订单</a>
                        <a href="../view/collect.html"style="padding-left:20px ;">我的生鲜</a>
                        
                        <a href="../view/seckile.html"style="padding-left:20px ;">限时秒杀</a>
                        <a href="../view/forum.html"style="padding-left:20px ;">好物推荐</a>
                    </span>              
                </div>
            </div>
        </div>
    </div>
    <div class="nav-logo">
        <div class="search">
            <div class="navf">
                
            </div>

            <div class="navt">
                <span id="parent">
                    <span class="c1"></span>
                    <span>
                        <input type="text" id="search">
                    </span>
                    <span>
                        <button class="bsou">搜索</button>
                    </span>
                </span>
            </div>

            <div class="cart">
                <div class="cart-f">
                <a href="../view/buycar.html" class="layui-btn layui-btn-primary" style="color: honeydew;background-color: green;">购物车</a>
                </div>
           </div>
        </div>
    </div>

    <div class="product-body">
        <div class="product-body-f">
            <div class="product-body-left">
                <div class="left-first">
                    <img src="../img/p1.png" alt="">
                </div>
                <div class="left-two">
                    <div class="layui-row">
                        <div class="layui-col-md2">
                            <button type="button" class="layui-btn"style="color: #ddd;background-color: white;height: 50px;">
                                <i class="layui-icon">&#xe603;</i>
                            </button>
                        </div>
                        <div class="layui-col-md2">
                            <img src="../img/p2.png" alt="">
                        </div>
                        <div class="layui-col-md2">
                            <img src="../img/p2.png" alt="">
                        </div>
                        <div class="layui-col-md2">
                            <img src="../img/p2.png" alt="">
                        </div>
                        <div class="layui-col-md2">
                            <img src="../img/p2.png" alt="">
                        </div>
                        <div class="layui-col-md2">
                            <button type="button" class="layui-btn" style="color: #ddd;background-color: white;height: 50px;">
                                <i class="layui-icon">&#xe602;</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="product-body-right">
                <div class="right-first" style="height: 80px;">
                    <h2 style="color: gray;margin-left: 10px;">郁金香茉莉香新鲜葡萄</h2>
                </div>
                <div class="right-two" style="background-color: #eaeaea;height: 100px;">
                    <div style="margin-top: 10px;margin-left: 10px;">
                        价格:<span style="font-size: 28px;color: red ;margin-left: 15px;">￥49.99</span>
                    </div>
                    <div style="margin-top: 10px;margin-left: 10px;">
                        优惠:<span style="font-size: 20px;margin-left: 15px;">您有一张满100减20的优惠券</span>
                    </div>
                </div>
                <div class="right-three" style="height: 60px;">
                    <div style="margin-top: 10px;margin-left: 10px;">
                        配送地址:<span><input type="text" name="phoneName"  placeholder="请输入配送地址" autocomplete="off" ></span>
                    </div>
                </div>
                <div class="right-four" >
                    <div class="layui-inline">
                        
                        <!-- <label>数量</label>
                        <button type="button" class="layui-btn layui-btn-sm" style="color: #ddd;background-color: white;height: 50px;">
                            <i class="layui-icon">&#xe67e;</i>
                          </button>
                        <div class="layui-input-inline" style="width: 50px;">
                          <input type="password" name="" autocomplete="off" class="layui-input">
                        </div>
                        <button type="button" class="layui-btn layui-btn-sm" style="color: #ddd;background-color: white;height: 50px;">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                        <button type="button" class="layui-btn">加入购物车</button> -->
                        <div class="plus-minus">  
                            <div class="layui-form-item" style="float: left;">  
                                <label class="layui-form-label">数量</label>  
                                <div class="layui-input-block" style="width: 80px;">  
                                    <input type="number" name="num" data-step="1" data-maxvalue="20" data-minvalue="1" lay-verify="required" autocomplete="off" class="layui-input num">
                                </div>  
                                
                            </div>  
                            <button type="button" class="layui-btn" style="float: left;margin-left: 15px;">加入购物车</button>
                        </div>  

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="product-body-introduce">
        <div class="product-body-t">
            <div class="layui-row" style="background-color: #ddd;">
                <div class="">
                    <ul class="layui-nav" lay-filter="" style="background-color: #ddd;">
                        <li class="layui-nav-item layui-this"><a href="../view/product.html">商品介绍</a></li>
                        <li class="layui-nav-item"><a href="">规格与包装</a></li>
                        <li class="layui-nav-item"><a href="">售后保障</a></li>
                        <li class="layui-nav-item"><a href="../view/product-comment.html">商品评价</a></li>
                    </ul>
                </div>
                <!-- <div class="layui-col-md1">
                    <button type="button" class="layui-btn" style="background-color: green;margin-top: 8px;">购物车</button>
                </div> -->
            </div>

            <div class="introduce-two">
                <img src="../img/p3.jpg" alt="">
                <img src="../img/p4.jpg" alt="">
                <img src="../img/p5.jpg" alt="">
            </div>
        </div>

    </div>

    <div class="bott">
        <div class="bott-f">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div style="font-size: 10px;">
                        <li><img src="../img/duo.png" alt="">品类齐全,轻松购物</li>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div style="font-size: 10px;">
                        <li><img src="../img/kuai.png" alt="">多仓直发,极速配送</li>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div style="font-size: 10px;">
                        <li><img src="../img/hao.png" alt="">正品行货,精致服务</li>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div style="font-size: 10px;">
                        <li><img src="../img/sheng.png" alt="">天天低价,畅选无忧</li>
                    </div>
                </div>
            </div>
            <hr>
            <div class="layui-row" style="margin-top: 15px;">
                <div class="layui-col-md3">
                    <div>
                        <dt>购物指南</dt>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">购物流程</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">会员介绍</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">常见问题</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">热销商品</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">联系客服</a>
                        </dd>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div>
                        <dt>配送方式</dt>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">上门自提</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">211限时达</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">配送服务查询</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">配送费收取标准</a>
                        </dd>
                        <dd>
                            <a class="dd" target="_blank" href="#">海外配送</a>
                        </dd>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div>
                        <dt>支付方式</dt>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">货到付款</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">在线支付</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">分期付款</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">公司转账</a>
                        </dd>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div>
                        <dt>售后服务</dt>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">售后政策</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">价格保护</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">退款说明</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">返修/退换货</a>
                        </dd>
                        <dd>
                            <a class="dd" rel="nofollow" target="_blank" href="#">取消订单</a>
                        </dd>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>